<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-微博发布</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        h1 {
            font-size: 20px;
            text-align: center;
            margin-bottom: 20px;
        }

        .main {
            width: 400px;
            box-sizing: content-box;
            margin: 30px auto;
            padding: 20px;
            border: 1px dashed #ccc;
        }

        .box::after {
            content: ".";
            display: block;
            clear: both;
            font-size: 0;
            line-height: 0;
            visibility: hidden;
        }

        #text-view {
            width: 350px;
            height: 100px;
            font-size: 15px;
            padding: 5px;
            box-sizing: border-box;
            /*设置输入框不可变化*/
            resize: none;
            vertical-align: middle;
        }

        #publish-btn {
            width: 40px;
            vertical-align: middle;
        }

        #weibo-list > li {
            font-size: 13px;
            padding: 5px 40px 5px 0;
            border-bottom: 1px dashed #cccccc;
        }

        #weibo-list > li > a {
            float: right;
            width: 40px;
            margin-right: -45px;
        }
    </style>
    <script>
        window.onload = function () {
            let publishBtn = document.getElementById("publish-btn");
            publishBtn.onclick = function () {
                // 获取文本域输入的内容
                let inputEle = document.getElementById("text-view");
                let inputValue = inputEle.value;
                let ulEle = document.getElementById("weibo-list");
                let liEle = document.createElement("li");
                // 添加文本域输入的内容到 liEle 中
                liEle.innerHTML = inputValue;
                // 创建 a 标签
                let aEle = document.createElement("a");
                aEle.innerHTML = "删除";
                aEle.setAttribute("href", "#");
                // 为 a 标签添加单机事件
                aEle.onclick = function () {
                    ulEle.removeChild(liEle);
                    // 阻止 a 标签的默认事件
                    event.preventDefault();
                }
                // 将 a 标签添加到 liEle 中
                liEle.appendChild(aEle);
                // 将 liEle 添加到 ulEle 中
                ulEle.appendChild(liEle);
                // 清空文本域中的内容
                inputEle.value="";
            }
        }
    </script>
</head>
<body>
<div class="main">
    <h1>微博发布</h1>
    <div class="box">
        <textarea name="content" id="text-view"></textarea>
        <input type="button" id="publish-btn" value="发布">
    </div>
    <ul id="weibo-list">
        <!--<li>哈哈哈 <a>删除</a></li>
        <li>哈哈哈 <a>删除</a></li>
        <li>哈哈哈 <a>删除</a></li>-->
    </ul>
</div>
</body>
</html>